import { _decorator, Component, Node, UITransform ,ProgressBar} from 'cc';
import { BaseComponent } from '../base/BaseComponent';

const { ccclass, property, executeInEditMode } = _decorator;
import { EDITOR } from 'cc/env';

@ccclass('MaskProgressBar')
@executeInEditMode(EDITOR)
export class MaskProgressBar extends ProgressBar {

    @property(Node)
    mask: Node = null!;

    @property(Node)
    bar: Node = null!;

    _progress: number = 0

    @property({override: true})
    set progress(val: number) {
        this._progress = val<0?0:val>1?1:val

        this.refreshBar()
    }

    get progress() {
        return this._progress
    }

    private refreshBar() {
        const maskUITransform = this.mask.getComponent(UITransform)
        maskUITransform.setContentSize(this.bar.getComponent(UITransform).width * this._progress, maskUITransform.height)
    }

}

